<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>

    <script>
        $(function () {
            var $btn = $('#btn');
            var $box = $('.box');

            $btn.click(function fn() {
                // $box.animate({"width": "600px"}, 1000, 'linear', function () {
                //
                //     $box.animate({"margin-top": 600}, 1000, function () {
                //         $box.animate({"margin-top": 0, "width": 200}, 1000, fn());
                //     })
                //
                // });  //linear：匀速运动， swing：缓冲
                //

                $box.stop().slideToggle();


            })


        })
    </script>

</head>

<body>
<input type="button" value="动画" id="btn">

<div class="box"></div>

</body>
</html>